<template>
  <div id="page1-index" ref="appRef">
    <div class="page-title">电煤供需平衡监测分析</div>
    <div class="bg">
      <div class="render-item">
        <div class="box-header">建设背景</div>
        <div class="box-container container-left">
          <div class="container-left-inner container-left-inner1">
            <div class="block-wrap block-wrap1">
              <div class="row1">
                <span>实施可再生能源替代行动，深化电力体制改革，购进以新能源为主体的新型电力系统。</span>
              </div>
              <div class="row2">
                <span>——2021年3月 习近平 中央财经委员会第九次会议</span>
              </div>
            </div>
            <div class="block-wrap block-wrap2">
              <div class="row1">
                <span>
                  加快构建清洁低碳、安全充裕、经济高效、供需协同、灵活智能的新型电力系统，更好推动能源生产和消费革命，保障国家能源安全。
                </span>
              </div>
              <div class="row2">
                <span>——2023年7月 习近平 中央全面深化改革委员会第二次会议</span>
              </div>
            </div>
          </div>

          <div class="container-left-inner container-left-inner2">
            <div class="header">
              <div class="header-row1">
                <div class="chart1">
                  <div class="chart1-box">
                    <Chart3DOne />
                  </div>
                  <div class="chart1-title">
                    <span>发电量占比</span>
                  </div>
                </div>
                <div class="main-text">
                  <div class="text1">新型电力系统建设</div>
                  <div class="text2">清洁能源大幅增长</div>
                </div>
                <div class="chart2">
                  <div class="chart2-box">
                    <Chart3DTwo />
                  </div>
                  <div class="chart2-title">
                    <span>装机容量占比</span>
                  </div>
                </div>
              </div>
              <div class="header-row2">
                <div class="text1">主体能源</div>
                <div class="text2">煤电</div>
                <div class="text3">兜底保障</div>
                <div class="text4">电力保供</div>
                <div class="text5">系统稳定</div>
              </div>
            </div>
            <div class="footer">
              <div class="text1">能源安全</div>
              <div class="text2">经济发展</div>
              <div class="text3">社会稳定</div>
              <div class="text4">煤炭是我国能源安全的“压舱石”</div>
              <div class="text5">能源保供</div>
            </div>
          </div>
          <div class="container-left-inner container-left-inner3">
            <div class="text1">
              <span>电煤供需平衡关系</span>
            </div>
          </div>
        </div>
      </div>
      <div class="render-item">
        <div class="main-title">现状分析</div>
        <div class="main-row main-row1">
          <div class="cell cell1">
            <div style="position: absolute; top: -30px; left: 39.5%; font-size: 65px; font-weight: 700">
              用电需求预测难
            </div>
            <div class="cell-desp">
              <div class="cell-desp-img"></div>
              <div class="cell-desp-text">
                <div class="cell-text text1">电力消费弹性系数快速变化</div>
                <div class="cell-text text2">经济发展不确定性显著提升</div>
              </div>
            </div>
            <div class="cell-chart">
              <ChartOne />
            </div>
          </div>
          <div class="cell cell2">
            <div style="position: absolute; top: -30px; left: 39.5%; font-size: 65px; font-weight: 700">
              极端天气影响大
            </div>
            <div class="cell-chart">
              <ChartTwo />
            </div>
            <div class="cell-desp">
              <div class="cell-desp-img"></div>
              <div class="cell-desp-text">
                <div class="cell-text text3">冷热交替加剧极端天气频发</div>
                <div class="cell-text text4">来水丰枯交替影响水力发电</div>
                <div class="cell-text text5">全球变暖导致风电低于预期</div>
              </div>
            </div>
          </div>
        </div>
        <div class="main-row main-row2">
          <div class="cell cell3">
            <div style="position: absolute; top: -30px; left: 39.5%; font-size: 65px; font-weight: 700">
              清洁能源预测难
            </div>
            <div class="cell-desp">
              <div class="cell-desp-img"></div>
              <div class="cell-desp-text">
                <div class="cell-text text6">新能源装机增长速率远超预期</div>
                <div class="cell-text text7">装机与发电量的关系不成正比</div>
              </div>
            </div>
            <div class="cell-chart chartThreeBox">
              <!-- <div class="chartThreeBox-left">
                <ChartThird />
              </div>
              <div class="chartThreeBox-right">
                <ChartFour />
              </div> -->
              <ChartThirdTest />
            </div>
          </div>
          <div class="cell cell4">
            <div class="cell-chart">
              <div style="position: absolute; top: -30px; left: 39.5%; font-size: 65px; font-weight: 700">
                其他行业预测难
              </div>
              <div class="cell-chart" style="width: 100%">
                <ChartFive />
              </div>
            </div>
            <div class="cell-desp">
              <div class="cell-desp-img"></div>
              <div class="cell-desp-text">
                <div class="cell-text text8">高峰时期与电煤供应存在挤占关系</div>
                <div class="cell-text text9">行业用煤需求受经济或政策影响大</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="render-item">
        <div class="box-header">分析思路</div>
        <div class="box-container container-right">
          <div class="right-box right-box1">
            <div class="text1">煤炭总体需求分析</div>
            <div class="text2">电力行业煤炭消费监测分析</div>
            <div class="text3">全社会用电需求预测</div>
            <div class="text4">
              全社会
              <text style="color: rgba(255, 195, 0, 1)">用电</text>
              需求预测
            </div>
            <div class="text5">
              全社会
              <text style="color: rgba(255, 195, 0, 1)">发电</text>
              需求预测
            </div>
            <div class="text6">清洁能源发电能力预测</div>
            <div class="text7">
              <div style="color: rgba(255, 195, 0, 1); margin-bottom: 40px">太阳能</div>
              发电预测
            </div>
            <div class="text9">
              <!-- 风能发电预测 -->
              <div style="color: rgba(255, 195, 0, 1); margin-bottom: 40px">风能</div>
              发电预测
            </div>
            <div class="text10">
              <!-- 水力发电预测 -->
              <div style="color: rgba(255, 195, 0, 1); margin-bottom: 40px">水能</div>
              发电预测
            </div>
            <div class="text11">
              <!-- 核能发电预测 -->
              <div style="color: rgba(255, 195, 0, 1); margin-bottom: 40px">核能</div>
              发电预测
            </div>
            <div class="text12">火力兜底需求</div>
            <div class="text13">燃煤发电需求</div>
            <div class="text14">电煤需求</div>
            <div class="text15">非电行业煤炭消费监测分析</div>
            <div class="text16">冶金行业预测</div>
            <div class="text17">炼焦行业预测</div>
            <div class="text18">煤化工行业预测</div>
            <div class="text19">建材行业预测</div>
            <div class="text20">供热行业预测</div>
            <div class="text21">其他行业预测</div>
          </div>
          <div class="right-box right-box2">
            <div class="text1">煤炭总体消费需求</div>
          </div>
          <div class="right-box right-box3">
            <div class="text1">煤炭供需比与平衡关系</div>
            <div class="text2">供应过剩</div>
            <div class="text3">供需平衡</div>
            <div class="text4">供应紧张</div>
          </div>
          <div class="right-box right-box4">
            <div class="text1">煤炭总体供应需求</div>
          </div>
          <div class="right-box right-box5">
            <div class="text1">煤炭总体供应分析</div>
            <div class="text2">煤炭进口预测</div>
            <div class="text3">原煤产量需求</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import useDraw from '@/utils/useDraw'
import ChartOne from './chart-one/index'
import ChartTwo from './chart-two/index'
import ChartThird from './chart-third/index'
import ChartFour from './chart-four/index'
import ChartThirdTest from './chart-third-test/index'
import ChartFive from './chart-five/index'
import Chart3DOne from './chart-3d-one/index'
import Chart3DTwo from './chart-3d-two/index'

const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()

onMounted(() => {
  windowDraw()
  calcRate()
})

onUnmounted(() => {
  unWindowDraw()
})
</script>

<style lang="scss" scoped>
#page1-index {
  div {
    box-sizing: border-box;
  }
  color: #d3d6dd;
  width: 15360px;
  height: 2160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  .page-title {
    font-size: 120px;
    color: #fff;
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0px 20px 20px rgba(255, 255, 255, 0.3);
    z-index: 1;
  }
  .bg {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 136px 70px 30px 150px;
    background-image: url('../../assets/bgimg/1@3x.png');
    background-size: cover;
    background-position: center center;
    display: flex;
    .render-item {
      width: 33%;
      height: 100%;
      position: relative;
      // border: 10px solid rgb(0, 255, 170);
      .box-header {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 80px;
        font-weight: 400;
        letter-spacing: 0px;
        color: #fff;
        text-shadow: 0 0 5px #ffffff, /* 内部发光 */ 0 0 10px #ffffff, /* 更亮发光 */ 0 0 20px #6ec7ff,
          /* 蓝色发光 */ 0 0 30px #6ec7ff, /* 强蓝色发光 */ 0 0 40px #6ec7ff, /* 深蓝色光晕 */ 0 0 50px #6ec7ff,
          /* 外部深蓝光 */ 0 0 75px #6ec7ff; /* 扩散光晕 */
        margin-bottom: 60px;
      }
      .box-container {
        width: 100%;
        height: calc(100% - 180px);
      }
      .container-left {
        display: flex;
        .container-left-inner1 {
          width: 44%;
          height: 100%;
          position: relative;
          .block-wrap {
            width: 100%;
            .row1 {
              font-size: 45px;
              margin-bottom: 90px;
            }
            .row2 {
              font-size: 42px;
              padding-left: 300px;
            }
          }
          .block-wrap1 {
            position: absolute;
            top: 69%;
            left: 10%;
          }
          .block-wrap2 {
            width: 86%;
            position: absolute;
            bottom: 5%;
            left: 5%;
            // 设置文字行间距
            line-height: 1.5;
            .row1 {
              margin-bottom: 20px;
            }
            .row2 {
              padding-left: 400px;
            }
          }
        }
        .container-left-inner2 {
          width: 45.8%;
          height: 100%;
          .header {
            width: 100%;
            height: 65%;
            display: flex;
            flex-direction: column;
            .header-row1 {
              width: 100%;
              height: 65%;
              display: flex;
              .chart1 {
                width: 32%;
                height: 100%;
                display: flex;
                flex-direction: column;
                // border: 1px yellow solid;
                position: relative;
                .chart1-box {
                  // border: 1px yellow solid;

                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-size: 45px;
                  color: #fff;
                  // border: 1px red solid;
                  position: absolute;
                  top: 80px;
                  left: 98px;
                }
                .chart1-title {
                  width: 100%;
                  font-size: 36px;
                  color: #fff;
                  text-align: center;
                  position: absolute;
                  bottom: 120px;
                  left: 80px;
                }
              }
              .main-text {
                width: 20%;
                height: 100%;
                font-size: 45px;
                color: #fff;
                position: relative;
                .text1 {
                  width: 140%;
                  position: absolute;
                  font-size: 65px;
                  font-weight: 700;
                  top: 22%;
                  left: -12%;
                }
                .text2 {
                  font-size: 45px;
                  font-weight: 400;
                  position: absolute;
                  top: 40%;
                  right: 10px;
                }
              }
              .chart2 {
                width: 32%;
                height: 100%;
                display: flex;
                flex-direction: column;
                // padding-right: 240px;
                position: relative;
                .chart2-box {
                  // border: 1px yellow solid;

                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-size: 45px;
                  color: #fff;
                  position: absolute;
                  top: 90px;
                  left: -60px;
                }
                .chart2-title {
                  width: 100%;
                  font-size: 36px;
                  color: #fff;
                  text-align: center;
                  position: absolute;
                  bottom: 120px;
                  left: -60px;
                }
              }
            }
            .header-row2 {
              width: 100%;
              height: 35%;
              font-size: 45px;
              color: #fff;
              position: relative;
              .text1 {
                position: absolute;
                top: 40%;
                left: 13%;
              }
              .text2 {
                position: absolute;
                top: 10%;
                left: 42%;
              }
              .text3 {
                position: absolute;
                top: 44%;
                left: 47%;
              }
              .text4 {
                position: absolute;
                top: 33%;
                left: 58.6%;
                font-size: 32px;
                color: rgba(66, 224, 255, 1);
              }
              .text5 {
                position: absolute;
                top: 33%;
                left: 69.6%;
                font-size: 32px;
                color: rgba(66, 224, 255, 1);
              }
            }
          }
          .footer {
            width: 100%;
            height: 35%;
            position: relative;
            font-size: 45px;
            font-weight: 400;
            color: #fff;
            .text1 {
              position: absolute;
              top: 38%;
              left: 19.4%;
            }
            .text2 {
              position: absolute;
              top: 38%;
              left: 42.6%;
            }
            .text3 {
              position: absolute;
              top: 38%;
              left: 66%;
            }
            .text4 {
              font-size: 45px;
              position: absolute;
              top: 66.3%;
              left: 50%;
              transform: translate(-60%, -50%);
            }
            .text5 {
              font-size: 60px;
              position: absolute;
              top: 80%;
              left: 50%;
              transform: translate(-80%, -50%);
            }
          }
        }
        .container-left-inner3 {
          width: 10.2%;
          height: 100%;
          position: relative;
          .text1 {
            width: 90%;
            font-size: 65px;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            // 字间距
            letter-spacing: 1px;
            // 设置文字行间距
            line-height: 1.5;
            text-align: center;
          }
        }
      }
      .container-right {
        display: flex;
        .right-box {
          position: relative;
        }
        .right-box1 {
          width: 47.4%;
          height: 100%;
          .text1 {
            font-size: 65px;
            font-weight: 700;
            color: #fff;
            position: absolute;
            top: -3px;
            left: 50%;
            transform: translate(-36%, 0);
          }
          .text2 {
            font-size: 60px;
            font-weight: 700;
            color: #fff;
            position: absolute;
            top: 160px;
            left: 38.5%;
          }
          .text3 {
            font-size: 45px;
            font-weight: 400;
            color: #fff;
            position: absolute;
            top: 290px;
            left: 29%;
          }
          .text4 {
            width: 240px;
            text-align: center;
            font-size: 40px;
            font-weight: 400;
            color: #fff;
            position: absolute;
            top: 410px;
            left: 25%;
            // 设置文字行间距
            line-height: 1.5;
          }
          .text5 {
            width: 240px;
            text-align: center;
            font-size: 40px;
            font-weight: 400;
            color: #fff;
            position: absolute;
            top: 410px;
            left: 51%;
            // 设置文字行间距
            line-height: 1.5;
          }
          .text6 {
            font-size: 45px;
            position: absolute;
            top: 38%;
            left: 28%;
          }
          .text7 {
            font-size: 45px;
            position: absolute;
            top: 45%;
            left: 26%;
            text-align: center;
          }
          .text9 {
            font-size: 45px;
            position: absolute;
            top: 45%;
            left: 52%;
            text-align: center;
          }
          .text10 {
            font-size: 45px;
            position: absolute;
            top: 57%;
            left: 26%;
            text-align: center;
          }
          .text11 {
            font-size: 45px;
            position: absolute;
            top: 57%;
            left: 52%;
            text-align: center;
          }
          .text12 {
            font-size: 45px;
            position: absolute;
            top: 17%;
            left: 83%;
          }
          .text13 {
            font-size: 45px;
            position: absolute;
            top: 40%;
            left: 83%;
          }
          .text14 {
            font-size: 45px;
            position: absolute;
            top: 61%;
            left: 83.3%;
          }
          .text15 {
            width: 800px;
            font-size: 60px;
            font-weight: 700;
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-35%, 0);
          }
          .text16 {
            font-size: 40px;
            position: absolute;
            top: 79.5%;
            left: 12%;
          }
          .text17 {
            font-size: 40px;
            position: absolute;
            top: 79.5%;
            left: 26.4%;
          }
          .text18 {
            font-size: 40px;
            position: absolute;
            top: 79.5%;
            left: 40%;
          }
          .text19 {
            font-size: 40px;
            position: absolute;
            top: 79.5%;
            left: 55%;
          }
          .text20 {
            font-size: 40px;
            position: absolute;
            top: 79.5%;
            left: 69.4%;
          }
          .text21 {
            font-size: 40px;
            position: absolute;
            top: 79.5%;
            left: 83.5%;
          }
        }
        .right-box2 {
          width: 10%;
          height: 100%;
          position: relative;
          .text1 {
            width: 180px;
            font-size: 40px;
            font-weight: 400;
            color: rgba(83, 238, 252, 1);
            position: absolute;
            // 行间距
            line-height: 1.5;
            top: 49%;
            left: 24%;
          }
        }
        .right-box3 {
          width: 17%;
          height: 100%;
          position: relative;
          .text1 {
            width: 700px;
            font-size: 65px;
            font-weight: 700;
            position: absolute;
            top: -3px;
            left: 10%;
          }
          .text2 {
            font-size: 80px;
            font-weight: 400;
            position: absolute;
            top: 11%;
            left: 30%;
            background-image: linear-gradient(to right, rgba(12, 205, 223, 1), #fff);
            background-clip: text;
            color: transparent;
            display: inline-block;
            line-height: 1.2;
            vertical-align: middle;
          }
          .text3 {
            font-size: 80px;
            font-weight: 400;
            position: absolute;
            top: 62%;
            left: 30%;
            background-image: linear-gradient(to right, rgba(12, 205, 223, 1), #fff);
            background-clip: text;
            color: transparent;
            display: inline-block;
            line-height: 1.2;
            vertical-align: middle;
          }
          .text4 {
            font-size: 80px;
            font-weight: 400;
            position: absolute;
            top: 85%;
            left: 30%;
            background-image: linear-gradient(to right, rgba(12, 205, 223, 1), #fff);
            background-clip: text;
            color: transparent;
            display: inline-block;
            line-height: 1.2;
            vertical-align: middle;
          }
        }
        .right-box4 {
          width: 9%;
          height: 100%;
          position: relative;
          .text1 {
            width: 180px;
            font-size: 40px;
            font-weight: 400;
            color: rgba(83, 238, 252, 1);
            position: absolute;
            // 行间距
            line-height: 1.5;
            top: 49%;
            left: 34%;
          }
        }
        .right-box5 {
          width: 16.6%;
          height: 100%;
          position: relative;
          .text1 {
            width: 700px;
            font-size: 65px;
            font-weight: 700;
            position: absolute;
            top: -3px;
            left: 19%;
          }
          .text2 {
            font-size: 50px;
            font-weight: 400;
            position: absolute;
            top: 32%;
            left: 30%;
            background-image: linear-gradient(to right, rgba(12, 205, 223, 1), #fff);
            background-clip: text;
            color: transparent;
            display: inline-block;
            line-height: 1.2;
            vertical-align: middle;
          }
          .text3 {
            font-size: 50px;
            font-weight: 400;
            position: absolute;
            top: 86%;
            left: 30%;
            background-image: linear-gradient(to right, rgba(12, 205, 223, 1), #fff);
            background-clip: text;
            color: transparent;
            display: inline-block;
            line-height: 1.2;
            vertical-align: middle;
          }
        }
      }
    }
    .render-item:nth-child(2) {
      // border: 10px solid rgb(219, 19, 192);
      padding: 330px 360px 130px 340px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 160px;
      .main-title {
        width: 150px;
        font-size: 60px;
        color: #fff;
        // 字间距
        letter-spacing: 1px;
        // 设置文字行间距
        line-height: 1.2;
        font-weight: 700;
        text-shadow: 0px 20px 20px rgba(255, 255, 255, 0.3);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-70%, 12%);
      }
      .main-row {
        width: 100%;
        display: flex;
        gap: 130px;
        .cell {
          width: 50%;
          height: 100%;
          font-size: 60px;
          position: relative;
          .cell-desp {
            display: flex;
            flex-direction: column;
            .cell-desp-img {
              width: 100%;
              height: 60%;
            }
            .cell-desp-text {
              width: 100%;
              height: 40%;
              position: relative;
              .cell-text {
                font-size: 40px;
                font-weight: 400;
              }
              .text1 {
                position: absolute;
                top: 55px;
                left: 140px;
              }
              .text2 {
                position: absolute;
                top: 152px;
                left: 140px;
              }
              .text3 {
                position: absolute;
                top: 30px;
                left: 140px;
              }
              .text4 {
                position: absolute;
                top: 96px;
                left: 140px;
              }
              .text5 {
                position: absolute;
                top: 168px;
                left: 140px;
              }
              .text6 {
                position: absolute;
                top: 60px;
                left: 140px;
              }
              .text7 {
                position: absolute;
                top: 162px;
                left: 140px;
              }
              .text8 {
                position: absolute;
                top: 66px;
                left: 140px;
              }
              .text9 {
                position: absolute;
                top: 148px;
                left: 140px;
              }
            }
          }
        }
        .cell1,
        .cell3 {
          display: flex;
          .chartThreeBox {
            display: flex;
            // border: 4px red solid;
            height: 100% !important;
            .chartThreeBox-left {
              width: 50%;
              height: 100%;
            }
            .chartThreeBox-right {
              width: 50%;
              height: 100%;
            }
          }
          .cell-desp {
            width: 33.5%;
            height: 100%;
          }
          .cell-chart {
            width: 66.5%;
            height: 100%;
            // border: 1px red solid;
          }
        }
        .cell2,
        .cell4 {
          display: flex;
          .cell-desp {
            width: 39%;
            height: 100%;
          }
          .cell-chart {
            width: 61%;
            height: 100%;
          }
        }
      }
      .main-row1,
      .main-row2 {
        height: 50%;
      }
    }
  }
}
</style>
